<template>
  <div class="total">
    <div class="title1"> 
        <img src="@/assets/img/module4/part1/SketchPng26505d59e150617f0b34239825c581f5e252d1a01d3d1248137c55940dc1da99.png" class="image1" />
        <span class="text_1">空域安全间隔</span>
        <img src="@/assets/img/module4/part1/SketchPnge98c6bf1fe552f69e9323b59eaf92d6bef1bbd085f1b8cecefc968590eb3010d.png" class="image2" />
    </div>
    <div class="table-choice">
      <button  @click="selectUpdown"class="button">起降区</button>
      <button  @click="selectRoute"class="button">航  路</button>
      <button  @click="selectTask"class="button">作业区</button>
    </div>
    <div class="layout1">
      <div class="left_table">
          <div class="operation-bar">
            <div class="dropdown-wrapper">
              <select v-model="order" class = "dropdown-native"  placeholder=" " >
                <option class="selectOption" value=null>全体类型</option>
                <option class="selectOption" value=1>第1类型</option>
                <option class="selectOption" value=2>第2类型</option>
                <option class="selectOption" value=3>第3类型</option>
                <option class="selectOption" value=4>第4类型</option>
                <option class="selectOption" value=5>第5类型</option>
              </select>
            </div>
            <div class="search-wrapper">
              <input type="text" class="search-input" placeholder="关键字搜索"  v-model="searchKeyword" />
            </div

            <!-- 查询按钮 (Element UI) -->
            <el-button type="primary" icon="el-icon-search" class="el-query-button" @click="handleSearch">查询</el-button>

          </div>
      <div class="table_p">
          <TableComponent :tableData="tableData" @row="displayRowData" 
          :name_label="name_label"/>
        </div>
      </div>
        <div class="form-container">
          <div class="plat_total">
            <h3 class="title_plat">纵向安全间隔</h3>
            <div class="plat-form">
            <ManagementPlatform
            :aircraftTypes="[
            { name: 'I 航空器类型', values: this.showlist1 },
            { name: 'II 航空器类型', values: this.showlist2 },
            { name: 'III 航空器类型', values: this.showlist3 },
            { name: 'IV 航空器类型', values:this.showlist4 }
            ]"/>
            </div>
            <h3 class="title_plat">横向安全间隔</h3>
            <div class="plat-form">
            <ManagementPlatform
            :aircraftTypes="[
            { name: 'I 航空器类型', values:  this.showlist5 },
            { name: 'II 航空器类型', values:  this.showlist6 },
            { name: 'III 航空器类型', values:  this.showlist7 },
            { name: 'IV 航空器类型', values: this.showlist8 }
            ]"/>
            </div>
            <h3 class="title_plat">横向安全间隔</h3>
            <div class="plat-form">
            <ManagementPlatform
            :aircraftTypes="[
            { name: 'I 航空器类型', values:  this.showlist9 },
            { name: 'II 航空器类型', values:  this.showlist10 },
            { name: 'III 航空器类型', values:  this.showlist11 },
            { name: 'IV 航空器类型', values: this.showlist12 }
            ]"/>
            </div>
        </div>
        </div>
      </div>
  </div>
</template>

<script>
import ManagementPlatform from '@/components/plat_table.vue';
import TableComponent from '@/components/Table4.vue';
import axios from 'axios';
export default {
  name: "Module4SafetyInterval",
  components: {
    ManagementPlatform,
    TableComponent
  },
  data() {
    return {
      order:{
        type:Number,
      },
      tableData: [],
      formData:[],
      name_label:"起降区名称",
      showContent: false,
      showNewInput: false,
      row: null,
      searchKeyword: '',
      matchitem:[],
      selectedRow: null,
      api_post:'',
      name_option1:true,
      name_option2:false,
      name_option3:false,
      showlist1:[],
      showlist2:[],
      showlist3:[],
      showlist4:[],
      showlist5:[],
      showlist7:[],
      showlist6:[],
      showlist8:[],
      showlist9:[],
      showlist10:[],
      showlist11:[],
      showlist12:[],
      showlist13:[],
      showlist14:[],
      showlist15:[],
      showlist16:[],
      splitData: [],
      quiry_ui:'http://47.99.75.194:8084/takeoffland/search',
    };
  },
  created() {
    this.fetchTableData('http://47.99.75.194:8084/takeoffland/selectall');
    this.fetchFormData('http://47.99.75.194:8084/takeoffland/idsafeintervalall');
    },
  methods: {
    async handleSearch(){
    
     this.keytext = this.searchKeyword;
     await this.fetchAirspaceDemand();
   },

   async fetchAirspaceDemand() {
      try {
        const params = {};
        console.log("order",this.order);
        console.log("searchkey",this.keytext);
        if (this.order) {
          const orderAsInt = parseInt(this.order, 10); 
          console.log("orderInt",orderAsInt);
          if (!isNaN(orderAsInt)) {
            params.type= orderAsInt; 
          }
        }

        if (this.keytext) {
          params.index = this.keytext;
        }

        console.log("查询数据", params)
        const response = await axios.get(this.quiry_ui,  { params });
        this.tableData = response.data.data;
        console.log("airspaceDemand接口返回的数据", response.data.data)
      } catch (error) {
        console.error('Error fetching airspace demand:', error);
      }
    },


    async fetchTableData(api_post){
      console.log("fetchTableData  执行",api_post)
        try{
          const response = await axios.get(api_post);
          console.log(response.data);
          if(response.data.message ==='success'){
            this.tableData = response.data.data;
            console.log("fetchTableData  执行完成,done")
            console.log(response.data);
          }
        }
        catch (error){
          console.error('获取数据失败',error);
        }
    },
    async fetchFormData(api_post){
      console.log("fetchFormData  执行")
        try{
          const response = await axios.get(api_post)
          console.log(response.data);
          if(response.data.message ==='success'){
            this.formData = response.data.data;
            console.log("fetchFormData  执行完成,done")
            console.log(response.data);
          }
        }
        catch (error){
          console.error('获取数据失败',error);
        }

    },

    displayRowData(row) {
      console.log("rowdata ",row)
      this.selectedRow = row;
      this.getSplitDataById(row.id)
    },
    getSplitDataById(id) {
      // console.log('开始分割数据')
      const matchedItem = this.formData.find((item) => item.id === id);
      // console.log(matchedItem)
      this.showlist1=matchedItem.safeInterval[0][0];
      this.showlist2=matchedItem.safeInterval[0][1];
      this.showlist3=matchedItem.safeInterval[0][2];
      this.showlist4=matchedItem.safeInterval[0][3];
      this.showlist5=matchedItem.safeInterval[1][0];
      this.showlist6=matchedItem.safeInterval[1][1];
      this.showlist7=matchedItem.safeInterval[1][2];
      this.showlist8=matchedItem.safeInterval[1][3];
      this.showlist9=matchedItem.safeInterval[2][0];
      this.showlist10=matchedItem.safeInterval[2][1];
      this.showlist11=matchedItem.safeInterval[2][2];
      this.showlist12=matchedItem.safeInterval[2][3];
    },
    selectUpdown() {      
      this.fetchTableData('http://47.99.75.194:8084/takeoffland/selectall');
      this.name_label="起降区名称";
      this.fetchFormData('http://47.99.75.194:8084/takeoffland/idsafeintervalall');
      this.quiry_ui='http://47.99.75.194:8084/takeoffland/search';
    },
    selectRoute(){
      this.fetchTableData('http://47.99.75.194:8084/airlane/selectall');
      this.quiry_ui='http://47.99.75.194:8084/airlane/search';
      this.name_label="航路名称";
      this.fetchFormData('http://47.99.75.194:8084/airlane/idsafeintervalall');
    },
    selectTask() {
      this.quiry_ui='http://47.99.75.194:8084/workzone/search';
      this.fetchTableData('http://47.99.75.194:8084/workzone/selectall');
      this.name_label="工作区名称";
      this.fetchFormData('http://47.99.75.194:8084/workzone/idsafeintervalall');
    },
  }
};
</script>

<style scoped>
h1 {
  color: #ffffff;
}
.total{
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column; 

}
.table-choice {
  display: flex;
  /* justify-content: flex-start; */
  margin-top: 0.5%;
  align-items: center;
  height: 7%;
  width: 100%;
}

.button {
  display: flex; 
  background: url(@/assets/img/module4/part1/SketchPng672f442656b7e0f3c9863869768a199363cee97583efcf5fc791168bad3b2f9f.png)
    no-repeat  center center;
  background-size: contain;
  color: #ffffff;
  border: none;
  padding: 1.2vh 9vh;
  font-size: 1.5vh;
}

.button:hover {
  background:url(@/assets/img/module4/part1/SketchPng09fb34004ea1b0e5e91ff03feafa38bcb15201eba65a4db7b12083a8412bcc68.png)
  no-repeat center center;
  background-size: contain;
  padding: 1.2vh 9vh;
}


.title1{
  display: flex;
  height:3%;
  width:100%;
  background:url(@/assets/img/module4/part1/SketchPng9a3840ec9a1e44cb90b8cc0d22f86217e9bd2dd719c9cad7bfacd8322b4b85d6.png)
  no-repeat;
  background-size: auto 100%;
}

.image1{
  margin-left:1%;
  height:85%;

}

.text_1 {
  width: 80%;
  height: 100%;
  margin-left:1.5%;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 1px;
  font-size:2vh;
  font-family:PangMenZhengDao-3;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
}
.image2{
  margin-left: 10%;
  height:100%;
}


.layout1 {
  display: flex;
  align-items: stretch; /* 使左边表格和右边表单在纵向上对齐 */
  width: 100%;
  height:100%;
  margin-top: 0.3%;
  /* padding: 20hv; */
}

.table_p{
  width: 100%;
  height:96%;
  overflow: auto;
}


.form-container {
  display: flex;
  width: 70%; /* 固定外框的宽度 */
  height: 86%; /* 固定外框的高度 */
  margin-left: 1%;
  border: 0.4px solid #007bff; 
  border-radius: 0.88vh; 
  /* margin-left: 2%; */
  flex-direction: row; 
  position: relative; 
  }
.plat_total{
  display: flex;
  height:100%;
  width:100%;
  flex-direction: column; 
  /* margin-top: 2%; */
}
.plat-form
{
  height:30%;
  width:100%;
  margin-left:1.1%;
}

.left_table{
  width: 26%;
  height:86%;
}

.operation-bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 4%;
  margin-bottom: 2%;
  /* 调整高度为合适的视口高度 */
  /* 使用视口单位的内边距 */
}

.dropdown-wrapper {
  width: 40%;
  margin-right:1%;
  /* margin-top:1%; */
}

.dropdown-native {
  width: 100%;
  margin-top:1%;
  padding: 0.5vh;
  font-size: 1.5vh;
  background-color: transparent;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #fff;
}

.dropdown-native::placeholder {
  color: white !important;
}

.native-action-button img {
  width: 100%;
  height: auto;
}


.selectOption {
color: #000000;

}

.search-wrapper {
  width: 40%;
  /* margin-top: 1%; */
  margin-right: 1vw;
}

.search-input::placeholder {
  color: white !important;
  opacity: 1;
}

.search-input {
  /* margin-top: 1.5%; */
  width: 100%;
  padding: 0.5vh;
  font-size: 1.5vh;
  background-color: transparent;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #fff;
}

/* .el-button{

  margin-left: 0.05vh;

} */
.el-query-button {
  display: flex;
  align-self: center;
  font-size: 1.5vh;
  padding: 0.6vh 0.5vh;
  margin-left:1%;
  /* margin-right: 2vw; */
}

.title_plat {
  display: flex;
  width:15%;
  height:2%;
  font-size: 2vh; /* 调整为你需要的标题大小 */
  font-weight: bold; /* 设置字体粗细 */
  align-self: center;
  /* margin-top: 1%; */
  color: #ffffff; /* 你可以根据页面风格选择合适的颜色 */
}


</style>
